<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <title>时间轴</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .imgbox {
            width: 200px;
            display: inline-block;
            height: 170px;
        }

        img {
            width: 300px;
            position: relative;
            left: -50px;
            z-index: -1;
        }

        .wordbox-up {
            border: 3px solid rgb(141, 137, 137);
            border-radius: 10px;
            width: 200px;
            font-size: 20px;
            height: auto;
            display: inline-block;
            vertical-align: bottom;
            padding: 20px;
        }

        .wordbox-unseen-up {
            font-size: 20px;
            width: 200px;
            height: auto;
            display: inline-block;
            vertical-align: bottom;
            padding: 20px;
            visibility: hidden;
        }

        .wordbox-down {
            border: 3px solid rgb(141, 137, 137);
            border-radius: 10px;
            font-size: 20px;
            width: 200px;
            height: auto;
            display: inline-block;
            vertical-align: top;
            padding: 20px;
        }

        .wordbox-unseen-down {
            width: 200px;
            height: auto;
            font-size: 20px;
            display: inline-block;
            vertical-align: top;
            padding: 20px;
            visibility: hidden;
        }
    </style>
</head>

<body style="min-width:700px">
<div id="main" style="width: auto;height: auto">
    <div style="width: auto;padding-left: 50px; padding-top:50px;height: auto;">
        <div v-for="(item,index) in timeline" :class="index%2==0?'wordbox-up':'wordbox-unseen-up'">
            <p v-for="i in item.r">{{i.item}}</p>
        </div>
    </div>
    <div style="padding-left: 50px;">
        <div v-for="item in timeline" class="imgbox">
            <p style="font-size:20px;position: relative;top:50px;left: 50px">{{item.v}}</p>
            <p style="font-size:20px;position: relative;top:50px;left: 50px">{{item.t}}</p>
            <img style="position: relative;top:-80px" src="arrow.png">
        </div>
    </div>
    <div style="width: auto;padding-left: 50px;height: auto;">
        <div v-for="(item,index) in timeline" :class="index%2==0?'wordbox-unseen-down':'wordbox-down'">
            <p v-for="i in item.r">{{i.item}}</p>
        </div>
    </div>
</div>
</body>

</html>

<script type="text/javascript">

    const app = new Vue({
        el: '#main',
        data: {
            timeline: null
        },
        computed: {
            bank_name: function () {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == 'name') {
                        return pair[1];
                    }
                }
                return (false);
            }
        },
        created: function () {
            axios.get(`/timeline?name=${this.bank_name}`).then(res => {
                this.timeline = res.data
            })
        },
        methods: {}
    })
</script>
